<template>
  <div class="new-crowd-page">
    <!-- 页面标题（加大加粗） -->
    <h1 class="page-title">新建人群</h1>

    <!-- 基本信息区域（标题加大加粗） -->
    <div class="form-section">
      <h2 class="section-title">基本信息</h2>
      <el-form :model="form" label-width="80px">
        <!-- 人群名称（输入框改短） -->
        <el-form-item label="人群名称" required>
          <el-input
              v-model="form.groupName"
              placeholder="请输入人群名称"
              maxlength="30"
              show-word-limit
              class="input-with-count short-input"
          />
        </el-form-item>

        <!-- 人群介绍（输入框改短） -->
        <el-form-item label="人群介绍">
          <el-input
              type="textarea"
              v-model="form.groupIntro"
              placeholder="请输入人群介绍"
              maxlength="100"
              show-word-limit
              rows="3"
              class="textarea-with-count short-input"
          />
        </el-form-item>
      </el-form>
    </div>

    <!-- 人群特征区域（标题加大加粗） -->
    <div class="form-section">
      <h2 class="section-title">人群特征</h2>
      <!-- 使用 Element Plus 的穿梭框组件 -->
      <el-transfer
          v-model="form.featuresRight"
          :data="transferData"
          :titles="['可选标签', '已选标签']"
          :filterable="true"
          :filter-placeholder="'请输入搜索内容...'"
          @change="handleTransferChange"
      />
    </div>

    <!-- 预估人数 & 操作按钮（输入框改短） -->
    <div class="form-section">
      <h3 class="section-title">预估人数 & 操作</h3>
      <el-form :model="form" label-width="80px">
        <el-form-item label="预估人数" required>
          <el-input
              v-model="form.estimateCount"
              placeholder="请输入预估人数"
              class="short-input"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
          <el-button @click="handleReset" style="margin-left: 8px;">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElTransfer,
  ElButton
} from 'element-plus'

// 表单数据模型
const form = reactive({
  groupName: '',
  groupIntro: '',
  featuresRight: [],
  estimateCount: ''
})

// 模拟原始标签数据
const tagsLeft = ref([
  { label: '国内游爱好者', value: 'domestic-travel' },
  { label: '境外旅行达人', value: 'abroad-travel' },
  { label: '海滨度假者', value: 'photography' },
  { label: '历史文化游爱好者', value: 'movie' },
  { label: '小说', value: 'reading' },
  { label: '口红', value: 'gaming' },
  { label: '跑步', value: 'coffee' },
  { label: '瑜伽', value: 'tea' },
  { label: '篮球', value: 'sports-basketball' },
  { label: '健身', value: 'cycling' },
  { label: '游泳', value: 'mountains' },
  { label: '文学经典', value: 'self-driving' },
  { label: '漫画书', value: 'camping' },
  { label: '美食博主', value: 'fishing' },
  { label: '甜品控', value: 'gardening' },
  { label: '川菜迷', value: 'handicraft' },
  { label: '日料爱好者', value: 'painting' },
  { label: '素食主义者', value: 'calligraphy' },
  { label: '流行音乐迷', value: 'dancing' },
  { label: '游乐场游玩', value: 'drama' },
  { label: '古典音乐爱好者', value: 'music-production' },
  { label: '电子音乐达人', value: 'instrument' },
  { label: '民谣音乐追随者', value: 'cooking' },
  { label: '摇滚乐狂热者', value: 'baking' },
  { label: '境外游爱好者', value: 'wine-tasting' }
])

// 转换为穿梭框需要的数据格式
const transferData = computed(() => {
  return tagsLeft.value.map((item) => ({
    key: item.value,
    label: item.label,
    value: item.value
  }))
})

// 穿梭框值变化时的回调
const handleTransferChange = (value) => {
  console.log('已选标签 values：', value)
  form.featuresRight = value
}

// 提交表单
const handleSubmit = () => {
  console.log('表单数据：', form)
  // 实际项目中可对接API
}

// 重置表单
const handleReset = () => {
  form.groupName = ''
  form.groupIntro = ''
  form.featuresRight = []
  form.estimateCount = ''
}
</script>

<style scoped>
.new-crowd-page {
  padding: 20px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  max-width: 700px;
  margin: 0 auto;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #333;
  text-align: left;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #666;
  text-align: left;
}

.form-section {
  margin-bottom: 24px;
}

.input-with-count,
.textarea-with-count {
  width: 100%;
}

/* 短输入框样式 */
.short-input {
  width: 300px; /* 可根据需要调整宽度 */
}

/* 穿梭框样式优化 */
:deep(.el-transfer-panel__body) {
  max-height: 250px;
  overflow-y: auto;
}

:deep(.el-transfer-panel__header) {
  padding: 12px;
}

:deep(.el-transfer-panel) {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background: #fafafa;
}
</style>
